<template>
  <div class="public_main">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <template v-if="from=='merchant'">
					<el-breadcrumb-item>{{$t('dashBoard.no2')}}</el-breadcrumb-item>
					<el-breadcrumb-item>{{$t('dashBoard.no3')}}</el-breadcrumb-item>
					<el-breadcrumb-item >{{$t('merchantList.no66')}}</el-breadcrumb-item>
				</template>
				<template v-else-if="from=='onemerchant'">
					<el-breadcrumb-item>{{$t('sidebar.operator')}}</el-breadcrumb-item>
					<el-breadcrumb-item>{{$t('sidebar.processConfig')}}</el-breadcrumb-item>
					<el-breadcrumb-item>{{$t('sidebar.processConfig')}}</el-breadcrumb-item>
				</template>
				<template v-else>
					<el-breadcrumb-item>{{$t('dashBoard.no19')}}</el-breadcrumb-item>
          <el-breadcrumb-item>{{$t('dashBoard.no12')}}</el-breadcrumb-item>
          <el-breadcrumb-item>{{$t('dashBoard.no13')}}</el-breadcrumb-item>
				</template>
        <el-breadcrumb-item>{{$t('noteConfig.no3')}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 添加流程 -->
		<div class="oneLineHasOne">
			<p >
				<span>{{$t('merchantList.no8')}}:</span>
				<span>{{partnerNo}}</span>
			</p>
		</div> 
		<div class="oneLineHasOne ">
			<p >
				<span>{{$t('merchantList.no1')}}:</span>
				<span>{{partnerName}}</span>
			</p>
		</div> 
		<p class="mb30"></p>

    <!-- 放款渠道 -->
    <h3 class="mb20 blue" >{{$t('add.no51')}}</h3>
    <el-table :data="tableData1"  size="small" class="mb30">
      <el-table-column align="center" prop="channelName" :label="$t('channelManage.name')"></el-table-column>
      <el-table-column align="center" prop="orderId" :label="$t('noteConfig.no5')">
        <template slot-scope="scope" >
          <i class="el-icon-caret-top f26" @click="sort(scope.row,1)"></i>
          <span class="ml20"></span>
          <i class="el-icon-caret-bottom f26" @click="sort(scope.row,-1)"></i>
        </template>
      </el-table-column>
      <!-- v-model="paySwitch[scope.row.id]" -->
      <el-table-column fixed="right" align="center" prop="operation" :label="$t('public.operation')" min-width="180">
        <template slot-scope="scope" >
          <el-switch
            :value="scope.row.isEffective"
            @change="switchChange(scope.row)"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="true"
            :inactive-value="false">
          </el-switch>
        </template>
      </el-table-column>
    </el-table>


    <!-- 还款渠道 -->
    <h3 class="mb20 blue" >{{$t('yuenan.no27')}}</h3>
    <el-table :data="tableData2"  size="small" >
      <el-table-column align="center" prop="channelName" :label="$t('channelManage.name')"></el-table-column>
      <el-table-column align="center" prop="orderId" :label="$t('noteConfig.no5')">
        <template slot-scope="scope" >
          <i class="el-icon-caret-top f26" @click="sort(scope.row,1)"></i>
          <span class="ml20"></span>
          <i class="el-icon-caret-bottom f26" @click="sort(scope.row,-1)"></i>
        </template>
      </el-table-column>
      <el-table-column fixed="right" align="center" prop="operation" :label="$t('public.operation')" >
        <template slot-scope="scope" >
          <el-switch
            :value="scope.row.isEffective"
            @change="switchChange(scope.row)"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="true"
            :inactive-value="false">
          </el-switch>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>
<script>
export default {
  name: 'PayChannelListConfig',
  data () {
    return {
      partnerId: '',
      partnerName: '',
      partnerNo: '',
      tableData1: [{id:1},{id:2}],
      tableData2: [],
      paySwitch: {},
      backSwitch: {},
    }
  },
  methods: {
    sort(row,type){
      let options = {
        param: {
          partnerId: this.partnerId,
					partnerConfigChannelDO: {
            id: row.id,
            sequence: row.sequence,
            channelType: row.channelType,
          },
          addCount: type
        }
			}
			this.$axios.post(this.$action.pay_config_update, options).then(res => {
        if (res.code == 200) {
          this.$globalMsg.success(this.$t('message.success'))
          this.getDetailData()
        }else{
          this.$globalMsg.error(res.message)
				}
      })
    },
    switchChange(row){
      let options = {
        param: {
          partnerId: this.partnerId,
					partnerConfigChannelDO: {
            id: row.id,
            sequence: row.sequence,
            channelType: row.channelType,
            isEffective: !row.isEffective,
          },
          addCount: 0
        }
			}
			this.$axios.post(this.$action.pay_config_update, options).then(res => {
        if (res.code == 200) {
          this.$globalMsg.success(this.$t('message.success'))
          this.getDetailData()
        }else{
          this.$globalMsg.error(res.message)
				}
				
      })
    },
    getDetailData(){
      let option = {
        param:{
          partnerId: this.partnerId,  
        }
      }
      this.$axios.post(this.$action.pay_config_pageinfo, option).then(res => {
        if (res.code == 200) {
          this.partnerName = res.data.partnerName
          this.partnerNo = res.data.partnerNo
          this.tableData1 = res.data.payChannelList
          this.tableData2 = res.data.repayChannelList
				}
      })
		},
  },
  mounted () {
    this.partnerId = this.$route.query.id
		if(this.$route.query.id){
			this.getDetailData()
		}
  }
}
</script>
<style scoped lang="scss">

</style>
